<!--
    活动详情
-->
<ion-header>
    <ion-toolbar content-page>
        <ion-buttons start>
            <button ion-button icon-only (click)="backToProPage()">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            <div class="detailHead" *ngIf="!showRoster" [class.single]="!detailData.allowShare">
                <ion-segment [(ngModel)]="activity" (ionChange)="detailSegmentChange()">
                    <ion-segment-button value="detail">
                        活动详情
                    </ion-segment-button>
                    <ion-segment-button [hidden]="!detailData.allowShare" value="activityShare">
                        活动分享
                    </ion-segment-button>
                </ion-segment>
            </div>
            <div class="detailHead" *ngIf="showRoster">
                <ion-segment [(ngModel)]="activity" (ionChange)="detailSegmentChange()">
                    <ion-segment-button value="detail">
                        活动详情
                    </ion-segment-button>
                    <ion-segment-button [hidden]="!detailData.allowShare" value="activityShare">
                        活动分享
                    </ion-segment-button>
                    <ion-segment-button value="joinCust">
                        {{classify===0 ? '客户名单' : '增员名单'}}
                    </ion-segment-button>
                </ion-segment>
            </div>
        </ion-title>
        <ion-buttons end>
            <ion-buttons>
                <button ion-button icon-only adpmenutoggle>
                    <i class="menu"></i>
                </button>
            </ion-buttons>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>

    <div [ngSwitch]="activity" class="segmentAct">
        <div *ngSwitchCase="'detail'" class="segDetail">
            <div class="img-wrapper">
                <img class="bannerImg" [src]="detailData.bannerLink">
            </div>
            <p class="detailName">
                <span>{{detailData.name}}</span>
                <span class="actState" *ngIf="detailData.status==0">未开始</span>
                <span class="actState actState1" *ngIf="detailData.status==1">进行中</span>
                <span class="actState actState2" *ngIf="detailData.status==2">已结束</span>
                <span class="actState actState3" *ngIf="detailData.status==9">预览</span>
            </p>
            <p class="detailType" *ngIf="classify===0">{{computeType(detailData.type)}}</p>
            <p class="commP actTimeT bordered">活动时间</p>
            <p class="actTime">
                {{unixResolve(detailData.startTime).format('YYYY/MM/DD')}} -
                {{unixResolve(detailData.endTime).format('YYYY/MM/DD')}}
            </p>
            <p class="commP bordered">活动介绍</p>
            <div [innerHTML]="detailData.content | htmlCss" class="actIntro"></div>
            <div class="commDiv" *ngIf="detailData.officialDocs && detailData.officialDocs.length">
                <p class="commP bordered">活动公文</p>
                <p class="commActCont" *ngFor="let officialDoc of officialDocs"
                   (click)="openAttachFile(officialDoc.docUrl, officialDoc.docName)">
                    <span>{{officialDoc.docName}}{{officialDoc.docSize?"("+officialDoc.docSize+")":""}}</span>
                </p>
            </div>
            <div class="commDiv" *ngIf="detailData.trainDocs && detailData.trainDocs.length">
                <p class="commP bordered">培训资料</p>
                <p class="commActCont" *ngFor="let trainDoc of trainDocs"
                   (click)="openAttachFile(trainDoc.docUrl, trainDoc.docName)">
                    <span>{{trainDoc.docName}}{{trainDoc.docSize?"("+trainDoc.docSize+")":""}}</span>
                </p>
            </div>
            <div class="commDiv" *ngIf="detailData.toolsDocs && detailData.toolsDocs.length">
                <p class="commP bordered">助销工具</p>
                <p class="commActCont" *ngFor="let toolsDoc of toolsDocs"
                   (click)="openAttachFile(toolsDoc.docUrl, toolsDoc.docName)">
                    <span>{{toolsDoc.docName}}{{toolsDoc.docSize?"("+toolsDoc.docSize+")":""}}</span>
                </p>
            </div>
        </div>

        <div *ngSwitchCase="'targetCust'">
            目标客户
        </div>

        <div *ngSwitchCase="'activityShare'" class="activity-share-wrapper">
            <div class="inner">
                <!--<img [src]="detailData.shareImgLink" alt="">-->
                <iframe class="activity-share-iframe" [src]="shareUrl" *ngIf="shareUrl" frameborder="0"></iframe>
            </div>
            <button class="share" [ngClass]="{'show':showShareButton}" (click)="weChatShare()" ion-fixed>
            </button>
        </div>

        <div *ngSwitchCase="'joinCust'">
            <roster-list [activity]="detailData" [classify]="classify" (switch)="switchDetail()"></roster-list>
        </div>
    </div>

</ion-content>

<div class="share-menu" (click)="showShareMenu = false" [ngClass]="{'is-show':showShareMenu}">
    <div class="tools">
        <div class="share-friend">
            <div class="inner" (click)="shareOut(0)">
                <div class="icon"></div>
                <div>
                    分享给朋友
                </div>
            </div>
        </div>
        <div class="share-moment">
            <div class="inner" (click)="shareOut(1)">
                <div class="icon"></div>
                <div>
                    分享到朋友圈
                </div>
            </div>
        </div>
    </div>
</div>
